﻿@model IRIS.Models.EventViewModel

@{
    ViewBag.Title = "Edit";
}

@section SubMenu
{
     <ul>
        <li>@Html.ActionLink("Janúar", "Date", "Events", new { theMonth = 1, theYear=DateTime.Now.Year , theMonthName = "Janúar" },null)</li>
        <li>@Html.ActionLink("Febrúar", "Date", "Events", new { theMonth = 2, theYear = DateTime.Now.Year, theMonthName = "Febrúar" }, null)</li>
        <li>@Html.ActionLink("Mars", "Date", "Events", new { theMonth = 3, theYear=DateTime.Now.Year , theMonthName = "Mars" },null)</li>
        <li>@Html.ActionLink("Apríl", "Date", "Events", new { theMonth = 4, theYear = DateTime.Now.Year, theMonthName = "Apríl" }, null)</li>
        <li>@Html.ActionLink("Maí", "Date", "Events", new { theMonth = 5, theYear = DateTime.Now.Year, theMonthName = "Maí" }, null)</li>
        <li>@Html.ActionLink("Júní", "Date", "Events", new { theMonth = 6, theYear = DateTime.Now.Year, theMonthName = "Júní" }, null)</li>
        <li>@Html.ActionLink("Júlí", "Date", "Events", new { theMonth = 7, theYear = DateTime.Now.Year, theMonthName = "Júlí" }, null)</li>
        <li>@Html.ActionLink("Ágúst", "Date", "Events", new { theMonth = 8, theYear = DateTime.Now.Year, theMonthName = "Ágúst" }, null)</li>
        <li>@Html.ActionLink("September", "Date", "Events", new { theMonth = 9, theYear = DateTime.Now.Year, theMonthName = "September" }, null)</li>
        <li>@Html.ActionLink("Október", "Date", "Events", new { theMonth = 10, theYear = DateTime.Now.Year, theMonthName = "Október" }, null)</li>
        <li>@Html.ActionLink("Nóvember", "Date", "Events", new { theMonth = 11, theYear = DateTime.Now.Year, theMonthName = "Nóvember" }, null)</li>
        <li>@Html.ActionLink("Desember", "Date", "Events", new { theMonth = 12, theYear=DateTime.Now.Year, theMonthName = "Desember" },null)</li>
    </ul>}

<h2>Edit</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    
    <fieldset>
        <legend>EventCal</legend>

        @Html.HiddenFor(model => model.m_Event.ID)

        <div class="editor-label">
            @Html.LabelFor(model => model.m_Event.EventDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.m_Event.EventDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.m_Event.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.m_Event.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.m_Event.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.m_Event.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.m_Event.Location)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.m_Event.Location)
        </div>

            @if (Model.m_lat != "" || Model.m_lng != "")
            {
                @Html.HiddenFor(m => m.m_lat);
                @Html.HiddenFor(m => m.m_lng);
                                 
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        initialize();
                        var lat = $("#m_lat").val();
                        var lng = $("#m_lng").val();


                        function initialize() {
                            var myLatlng = new google.maps.LatLng(lat, lng);
                            var myOptions = {
                                zoom: 12,
                                center: myLatlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            }
                            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: map,
                                draggable: true,
                                title: "Staðsetning á atburði"
                            });
                        }


                        initialize();
                    });
                </script>  
                <div id="map_canvas" style="width: 500px; height: 350px"></div>
            }
            else
            { 
                //Do nothing
            }

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}
